<template>
  <el-dialog :model-value="dialogAdd" width="25%" :before-close="handleClose">
    <template #header>
      <h3 style="padding-bottom: 10px">添加用户</h3>
    </template>
    <el-form :model="form" ref="formRef" :rules="rules" label-width="auto">
      <el-form-item label="用户名称" prop="userName">
        <el-input v-model="form.userName" placeholder="用户名" v-noSpace />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input
          v-model="form.mobile"
          placeholder="手机(作为登录号)"
          v-noSpace
        />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="form.password"
          placeholder="请输入登录密码"
          v-noSpace
        />
      </el-form-item>
      <el-form-item label="角色" prop="roleId">
        <el-select v-model="form.roleId" placeholder="请输入用户角色">
          <el-option
            :label="item.roleName"
            :value="item.id"
            v-for="item in roleList"
            :key="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { RoleList } from '@/api/permission/user.js';
import { validateMobile } from '@/utils/formCheck';
import { onMounted, ref } from 'vue';
import { AddmodifyUser } from '@/api/permission/user';
// 添加用户数据
const form = ref({
  userName: '',
  mobile: '',
  password: '',
  roleId: '',
});
// 校验规则
const formRef = ref(null);
const rules = {
  mobile: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { validator: validateMobile, trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    // { min: 6, message: '密码长度不能小于6位', trigger: 'blur' },
  ],
  userName: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
  roleId: [{ required: true, message: '请选择用户角色', trigger: 'change' }],
};
// 下拉列表
const roleList = ref([]);
// 定义 props，接收父组件传递的数据
// eslint-disable-next-line no-unused-vars
const props = defineProps({
  dialogAdd: {
    type: Boolean,
  },
});

// 定义 emits，向父组件发送事件
const emit = defineEmits(['confirm', 'cancel']);

// 定义响应式变量，控制对话框的显示和隐藏

// 处理取消按钮的点击事件
const handleCancel = () => {
  if (formRef.value) {
    formRef.value.resetFields();
  }
  form.value = {};
  emit('cancel');
};

// 处理确认按钮的点击事件
const handleConfirm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      const res = await AddmodifyUser({
        ...form.value,
      });
      if (res.data.code === 200) {
        // eslint-disable-next-line no-undef
        ElMessage({
          message: '添加成功',
          type: 'success',
        });
        emit('confirm');

        handleClose();
      } else {
        // eslint-disable-next-line no-undef
        ElMessage({
          message: res.data.msg,
          type: 'error',
        });
      }
    }
  });
};
// 获取角色下拉列表
const getRoleList = async () => {
  const res = await RoleList();
  roleList.value = res.data.data;
};
// 关闭对话框
const handleClose = () => {
  handleCancel();
};
onMounted(() => {
  getRoleList();
});
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
